<template>
	<view class="uni-tag" :class="[
		`uni-tag--${type}`,
		`uni-tag--${size}`,
		{
			'uni-tag--circle': circle,
			'uni-tag--mark': mark,
			'uni-tag--disabled': disabled,
			'uni-tag--inverted': inverted
		}
	]" :style="tagStyle" @click="onClick">
		<text class="uni-tag__text" :style="textStyle">
			<slot>{{ text }}</slot>
		</text>
		<view class="uni-tag__close" v-if="closable" @click.stop="onClose">
			<text class="uni-tag__close-icon">×</text>
		</view>
	</view>
</template>

<script>
/**
 * uni-tag 标签
 * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
 */
export default {
	name: 'uni-tag',
	props: {
		// 标签内容
		text: {
			type: String,
			default: ''
		},
		// 标签类型
		type: {
			type: String,
			default: 'default' // default, primary, success, warning, error
		},
		// 标签大小
		size: {
			type: String,
			default: 'normal' // mini, small, normal, large
		},
		// 是否为圆形
		circle: {
			type: Boolean,
			default: false
		},
		// 是否为标记样式
		mark: {
			type: Boolean,
			default: false
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		// 是否可关闭
		closable: {
			type: Boolean,
			default: false
		},
		// 是否反色显示
		inverted: {
			type: Boolean,
			default: false
		},
		// 自定义颜色
		color: {
			type: String,
			default: ''
		},
		// 自定义背景色
		bgColor: {
			type: String,
			default: ''
		},
		// 自定义边框色
		borderColor: {
			type: String,
			default: ''
		}
	},
	computed: {
		tagStyle() {
			let style = {};
			if (this.bgColor) {
				style.backgroundColor = this.bgColor;
			}
			if (this.borderColor) {
				style.borderColor = this.borderColor;
			}
			return style;
		},
		textStyle() {
			let style = {};
			if (this.color) {
				style.color = this.color;
			}
			return style;
		}
	},
	methods: {
		onClick() {
			if (!this.disabled) {
				this.$emit('click');
			}
		},
		onClose() {
			this.$emit('close');
		}
	}
};
</script>

<style scoped lang="scss">
.uni-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 6rpx;
	padding: 0 16rpx;
	height: 48rpx;
	line-height: 1;
	font-size: 24rpx;
	white-space: nowrap;
	vertical-align: middle;
	position: relative;
	transition: all 0.3s;
	
	// 类型样式
	&--default {
		background-color: #f7f8fa;
		color: #646566;
		border-color: #ebedf0;
	}
	
	&--primary {
		background-color: #3c9cff;
		color: #fff;
		border-color: #3c9cff;
	}
	
	&--success {
		background-color: #5ac725;
		color: #fff;
		border-color: #5ac725;
	}
	
	&--warning {
		background-color: #ff9500;
		color: #fff;
		border-color: #ff9500;
	}
	
	&--error {
		background-color: #f56c6c;
		color: #fff;
		border-color: #f56c6c;
	}
	
	// 大小样式
	&--mini {
		height: 32rpx;
		font-size: 20rpx;
		padding: 0 8rpx;
	}
	
	&--small {
		height: 40rpx;
		font-size: 22rpx;
		padding: 0 12rpx;
	}
	
	&--large {
		height: 64rpx;
		font-size: 28rpx;
		padding: 0 24rpx;
	}
	
	// 圆形样式
	&--circle {
		border-radius: 50rpx;
	}
	
	// 标记样式
	&--mark {
		border-radius: 0 12rpx 12rpx 0;
		
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 8rpx 0 8rpx 8rpx;
			border-color: transparent transparent transparent #fff;
		}
	}
	
	// 禁用样式
	&--disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
	
	// 反色样式
	&--inverted {
		&.uni-tag--primary {
			background-color: rgba(60, 156, 255, 0.1);
			color: #3c9cff;
		}
		
		&.uni-tag--success {
			background-color: rgba(90, 199, 37, 0.1);
			color: #5ac725;
		}
		
		&.uni-tag--warning {
			background-color: rgba(255, 149, 0, 0.1);
			color: #ff9500;
		}
		
		&.uni-tag--error {
			background-color: rgba(245, 108, 108, 0.1);
			color: #f56c6c;
		}
	}
	
	&__text {
		line-height: 1;
	}
	
	&__close {
		margin-left: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.1);
		transition: background-color 0.3s;
		
		&:hover {
			background-color: rgba(0, 0, 0, 0.2);
		}
		
		&-icon {
			font-size: 24rpx;
			line-height: 1;
			color: inherit;
		}
	}
}
</style>